$modal-content-bg                    : white !default;
$modal-content-border-color          : transparent !default;
$modal-content-fallback-border-color : #999 !default;
$modal-overlay                       : rgba($light-grey, 0.75) !default;


.modal-overlay {
  background-color: $modal-overlay;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  &.modal-closed {
    z-index: -10;
    opacity: 0;
  }

  &.modal-open {
    z-index: 10;
    opacity: 1;
    transition: opacity .25s ease-in-out;

    .modal-container {
      max-height: 100%;
      transition: max-height .25s ease-in-out;
      max-width: 75%;
      margin: 0 auto;
    }
  }
}

.large-modal {
  &.modal-container {
    width: calc(100% - 40px);
    max-width: 990px;
    margin: 0 auto;
  }
}

.large-modal.large-height {
  &.modal-container {
    max-height: 95vh !important;
    display: flex;

    > section {
      display: flex;
      flex-direction: column;

      > .modal-scroll-panel {
        flex: 1;
        overflow: auto;
      }
    }
  }
}

.medium-modal {
  &.modal-container {
    width: calc(100% - 40px);
    max-width: 750px;
    margin: 0 auto;
  }
}

.modal-container {
  background-color: $modal-content-bg;
  border: solid $border 1px;
  box-shadow: 0 0 15px $shadow;
  z-index: 15;
  max-height: 0;
  position: relative;
  padding: 20px;
  margin-bottom: 20px;

  &.modal-edit-setting {
    .container-setting {
      max-height: 70vh !important;
      overflow-y: scroll;
    }
  }

  &.large-modal {
    &.modal-container {
      width: calc(100% - 40px);
      max-width: 990px;
      margin: 0 auto;
    }
  }

  &.medium-modal {
    &.modal-container {
      width: calc(100% - 40px);
      max-width: 750px;
      margin: 0 auto;
    }
  }

  .modal-header {
    margin: 0;
    background-color: $light-grey;
    padding: 15px 30px;

    .modal-title {
      display: inline-block;
      vertical-align: middle;
      margin: 0;

      // color: $light-grey;

    }

    .close {
      display: inline-block;
      vertical-align: middle;
      float: right;
      margin-top: -5px;
      padding: 10px 0;
      color: $mid-grey;
    }
  }

  .container-header-text {
    text-align: center;
    padding: 20px 0;
    font-size: 1.25em;
    line-height: 1.25em;

    .display-name {
      @include force-wrap;
    }
  }

  .modal-content {
    padding: 0 30px;
  }

  .modal-footer {
    margin: 30px;
    padding-top: 15px;
    border-top: solid thin $light-grey;
  }

  .modal-yaml {
    max-width: calc(100vw - 100px);
  }

  table {
    thead {
      .fixed-header,
      .fixed-header-actions {
        background: transparent;
      }
    }
  }
}
